<template>
  <div :style="{width: width+'px',height: '40px'}">
    <Dropdown style="width: 100%" :visible="iconSelectVisible" trigger="custom">
      <Input @on-focus="openIconSelect" v-model="queryIcons" @on-blur="closeIconSelect">
        <template #prepend>
          <Icon :type="selectIcons" size="20"/>
        </template>
      </Input>
      <!--图标选择页面-->
      <template #list>
        <DropdownMenu>
          <div class="icon-list">
            <i v-for="item in iconData" :key="item" :class="`ivu-icon ivu-icon-${item}`"
               @click.native="setIcons(item)"/>
          </div>
        </DropdownMenu>
      </template>
    </Dropdown>
  </div>
</template>

<script setup>
import iconsData from '@/config/icons.json';
import {computed, reactive, ref} from "vue";

const selectIcons = ref('')

const iconSelectVisible = ref(false)

const queryIcons = ref('')

const emit = defineEmits(['getSelectedIcon'])

const props = defineProps({
  width:{
    type:String,
    default:'310'
  }
})

const setIcons = (item) => {
  // selectIcons.value = ''
  selectIcons.value = item
  queryIcons.value = item

  console.log(selectIcons.value)
  console.log(queryIcons.value)
  emit('getSelectedIcon', selectIcons.value)
  iconSelectVisible.value = false
}

const openIconSelect = () => {
  console.log('打开')
  // queryIcons.value = ''
  iconSelectVisible.value = true
}

const closeIconSelect = () => {
  console.log('关闭')
  setIcons(queryIcons.value)
  iconSelectVisible.value = false
}

const iconData = computed(() => {
  return iconsData.filter((e, index) => {
    return e.includes(queryIcons.value)
  })
})

defineExpose({
  selectIcons,
  setIcons
})

</script>

<style scoped lang="less">
@import "./icon-picker.less";
</style>
